<template>
  <div class="wraps">

    <!-- 左上 立项统计 -->
    <div class="upperleft">
      <el-card class="box-card" shadow="hover" style="height: 100%;">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">立项统计</span>
        </div>
        <div style="font-size: 16px">
            <el-card class="box-card" shadow="hover" style="height: 43.2vh; position: relative;">
              <LxTj></LxTj>
            </el-card>
        </div>
      </el-card>
    </div>

    <!-- 左下 通知公告 -->
    <div class="lowerLeft">
      <el-card class="box-card" shadow="hover" style="height: 100%;">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">通知公告</span>
        </div>
        <div style="font-size: 16px">
          <TzGg></TzGg>
        </div>
      </el-card>
    </div>

    <!--中上 图片展示-->
    <div class="soso">
      <el-card class="box-card" shadow="hover" style="height: 100%;">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">图片展示</span>
        </div>
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="item in xmKbImgList" :key="item.tpName">
            <img class="img" :src="item.src" alt="图片丢失了" :title="item.title">
          </el-carousel-item>
        </el-carousel>
      </el-card>
    </div>

    <!-- 中下 项目状态 -->
    <div class="lowerMiddle">
      <el-card class="box-card" shadow="hover" style="height: 100%;">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">项目状态</span>
        </div>
        <div style="font-size: 16px">
          <el-card class="box-card" shadow="hover" style="height: 43.2vh; position: relative;">
            <XmZt></XmZt>
          </el-card>
        </div>
      </el-card>
    </div>

    <!-- 右上 审核待办 -->
    <div class="upperRight">
      <el-card shadow="hover" style="height: 100%;">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">审核待办</span>
        </div>
        <div class="sim">
          <div style="font-size: 14px;line-height: 2.1;">
            <div style="display: flex; align-items: center;" class="ball-en">
              <span class="ball color1"/>
              <div class="ball-label">项目立项审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
            </div>
            <div style="display: flex; align-items: center;" class="ball-en">
              <span class="ball color2"/>
              <div class="ball-label">科研合同审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
            </div>
            <div style="display: flex; align-items: center;" class="ball-en">
              <span class="ball color3"/>
              <div class="ball-label">合同变更审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
            </div>
            <div style="display: flex; align-items: center;" class="ball-en">
              <span class="ball color4"/>
              <div class="ball-label">执行情况审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
            </div>
            <div style="display: flex; align-items: center;" class="ball-en">
              <span class="ball color5"/>
              <div class="ball-label">成果鉴定审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
            </div>
            <div style="display: flex; align-items: center;" class="ball-en">
              <span class="ball color6"/>
              <div class="ball-label">成果转化审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
            </div>
            <div style="display: flex; align-items: center;" class="ball-en">
              <span class="ball color7"/>
              <div class="ball-label">奖项申报审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
            </div>
            <div style="display: flex; align-items: center;" class="ball-en">
              <span class="ball color8"/>
              <div class="ball-label">科技预算审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
            </div>
            <div style="display: flex; align-items: center;" class="ball-en">
              <span class="ball color9"/>
              <div class="ball-label">中间检查审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
            </div>
            <div style="display: flex; align-items: center;" class="ball-en">
              <span class="ball color10"/>
              <div class="ball-label">省部项目评价审核：<span style="color: #1890ff">{{ 22 }}</span>项</div>
            </div>
            <div style="display: flex; align-items: center;" class="ball-en">
              <span class="ball color11"/>
              <div class="ball-label">省部报奖审核待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
            </div>
            <div style="display: flex; align-items: center;" class="ball-en">
              <span class="ball color12"/>
              <div class="ball-label">项目开票审核待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
            </div>
          </div>
        </div>
      </el-card>

    </div>

    <!-- 右下 科技动态 -->
    <div class="lowerRight">
      <el-card class="box-card" shadow="hover" style="height: 100%;">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">科技动态</span>
        </div>
        <div style="font-size: 16px">
          <KjDt></KjDt>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
import LxTj from '@/views/xmgl/xmkb/LxTj';
import XmZt from '@/views/xmgl/xmkb/XmZt';
import TzGg from '@/views/xmgl/xmkb/TzGg';
import KjDt from '@/views/xmgl/xmkb/KjDt';
import {listTpzs} from "@/api/xmgl/tpzs";
export default {
  name: 'Xmkb',
  components: {LxTj, XmZt, TzGg, KjDt},
  data() {
    return {
      xmKbImgList: [],
    }
  },

  created() {
    this.getTpZs();
  },
  methods: {
    //图片展示获取
    getTpZs() {
      listTpzs().then(res => {
        this.xmKbImgList = res.rows
        for (let i = 0; i < this.xmKbImgList.length; i++) {
          this.xmKbImgList[i].src = process.env.VUE_APP_HD_API + this.xmKbImgList[i].tpSrc
          console.log(this.xmKbImgList[i].src)
        }
      })
    },

  }
}
</script>

<style scoped>
/* 媒体查询 在999px - 2401px内显示全部数据 */

/* 默认样式 - 当屏幕宽度不在指定范围内时使用 */
.ball-label {
  font-size: 19px; /* 这个值对应于最大的屏幕宽度（2401-2600px）的字体大小 */
}

@media screen and (max-width: 2401px) {
  .ball-label {
    font-size: 19px;
  }
}

@media screen   and (min-width: 2301px)  and (max-width: 2400px) {
  .ball-label {
    font-size: 17.5px;
  }
}

@media screen and (min-width: 2201px) and (max-width: 2300px) {
  .ball-label {
    font-size: 16.5px;
  }
}

@media screen and (min-width: 2101px) and (max-width: 2200px) {
  .ball-label {
    font-size: 15.5px;
  }
}

@media screen and (min-width: 2000px) and (max-width: 2100px) {
  .ball-label {
    font-size: 14.5px;
  }
}

@media screen and (min-width: 1900px) and (max-width: 1999px) {
  .ball-label {
    font-size: 13.5px;
  }
}

@media screen and (min-width: 1800px) and (max-width: 1899px) {
  .ball-label {
    font-size: 12.5px;
  }
}

@media screen and (min-width: 1701px) and (max-width: 1799px) {
  .ball-label {
    font-size: 11.9px;
  }
}

@media screen and (min-width: 1600px) and (max-width: 1700px) {
  .ball-label {
    font-size: 10.5px;
  }

}

@media screen and (min-width: 1500px) and (max-width: 1599px) {
  .ball-label {
    font-size: 10px;
  }
}

@media screen and (min-width: 1400px) and (max-width: 1499px) {
  .ball-label {
    font-size: 9px;
  }
}

@media screen and (min-width: 1301px) and (max-width: 1399px) {
  .ball-label {
    font-size: 8px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1299px) {
  .ball-label {
    font-size: 7.5px;
  }

}

@media screen and (min-width: 1101px) and (max-width: 1199px) {
  .ball-label {
    font-size: 6.5px;
  }
}


.wraps {
  position: relative;
  background-size: cover;
  width: 99.9%;
  height: calc(100vh - 134px);
  border: 2px dashed #aaa;
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}

/* 左上 */
.upperleft {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 51%; /* 距离下面 60% */
  left: 1%; /* 距离左侧1% */
  width: 30%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5); !* 模块背景颜色 并透明显示 *!*/
}

/* 左下 */
.lowerLeft {
  position: absolute;
  top: 50%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 1%; /* 距离左侧1% */
  width: 30%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* 中上 */
.soso {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 51%; /* 距离下面 60% */
  left: 32%; /* 距离左侧1% */
  width: 36%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* 中下 */
.lowerMiddle {
  position: absolute;
  top: 50%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 32%; /* 距离左侧1% */
  width: 36%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* 右上 */
.upperRight {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 51%; /* 距离下面 60% */
  left: 69%; /* 距离左侧1% */
  width: 30%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* 右下 */
.lowerRight {
  position: absolute;
  top: 50%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 69%; /* 距离左侧1% */
  width: 30%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* header 头部背景 */
/deep/ .el-card__header {
  padding: 6px 15px 7px;
  min-height: 30px;
  background-color: #D9EDF7;
}

/deep/ .el-card__body {
  padding: 2px 20px 20px 20px;
  height: 40vh;
}

.sim {
  height: 100%;
}

.ball-en {
  margin: 1px auto;
}

/* 审核待办中的颜色小圆球 */
.ball {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

.color1 {
  background-color: #5181FF;
}

.color2 {
  background-color: #958BFF;
}

.color3 {
  background-color: #faad14;
}

.color4 {
  background-color: #FF688D;
}

.color5 {
  background-color: #00DACE;
}

.color6 {
  background-color: #1F46AE;
}

.color7 {
  background-color: #32DF24;
}

.color8 {
  background-color: #EC4F56;
}

.color9 {
  background-color: #E39C2D;
}

.color10 {
  background-color: #A5CE15;
}

.color11 {
  background-color: #943DDD;
}

.color12 {
  background-color: #D11ED6;
}

.soso /deep/ .el-card__body {
  padding: 20px;
  box-sizing: border-box;
  height: calc(100% - 40px) !important;
}

.soso /deep/ .el-carousel {
  height: 100%;
}

.soso /deep/ .el-carousel__container {
  height: 100% !important;
}

.soso /deep/ .el-carousel__item {
  height: 100% !important;
}

.soso /deep/ .img {
  width: 100%;
  height: 100%;
}
</style>
